<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>example3</title>
        <script type='text/javascript' src='http://localhost:9000/public/js/lib/d3.min.js' ></script>
        <style>
			
			.svg{
				
			}
			.svg path{
				stroke:rgb(0,0,0);
				fill:none;
			}
			.yAxis .domain{
				stroke:rgb(0,0,0);
				stroke-width:1px;
				fill:none;
			}
			.yAxis .tick{
				stroke : rgb(0,0,0) ;
			}
        </style>
	</head>
	<body>
    	
        
    
		<script type='text/javascript' >
        	
			//@note 垂直变化
			//@author czh
			(function(w){
				
				var margin = {
					'left' : 10 ,
					'right' : 10 ,
					'top' : 10 ,
					'bottom' : 10
				} ;
				var width = 1000 + margin.left + margin.right ;
				var height = 300 + margin.top + margin.bottom ;
				
				var svg = d3.select('body').append('svg').attr({
					'width' : width  ,
					'height' : height ,
					'class' : 'svg'
				}) ;
				
				var y = d3.scale.linear()
						.domain([100,0])
						.range([0,height-margin.top-margin.bottom]);
						
				var yAxis = d3.svg.axis().scale(y).orient('left').ticks(3);
				
				svg.append('g').attr({
					'class' : 'yAxis' ,
					'transform' : 'translate(' + ( margin.left + 20 ) + ',' + margin.top + ')' 
				}).call(yAxis) ;
				var line = d3.svg.line()
						.x(function(d,i){return 30 + i * 100;})
						.y(function(d){ return y(d); }) ;		
				
				
				d3.json('4/get.html',function(error,json){
					if(error){
						console.log('something wrong') ;
						return true ;
					}
					svg.append('path').data(json).attr({
						'class' : 'line' ,
						'd' : line(json)
					}) ;
					svg.selectAll('circle').data(json).enter().append('circle').attr({
						'cx' : function(d,i){
							return 30 + i * 100 ;
						} , 
						'cy' : function(d){
							return y(d) ;
						} ,
						'r' : '4'
					}) ;
				}) ;
				
				window.setInterval(function(){
				
					d3.json('4/get.html',function(error,json){
						if(error){
							console.log('something wrong') ;
							return true ;
						}
						svg.select('path.line').transition().attr({
							'd' : line(json)
						}) ;
						svg.selectAll('circle').data(json).transition().attr({
							'cx' : function(d,i){
								return 30 + i * 100 ;
							} , 
							'cy' : function(d){
								return y(d) ;
							} 
						}) ;
					}) ;	
					
				},2000) ;
						
					
			}(window)) ;
			
			//@note 横线变化
			//@author czh
			(function(w){
				
				var svg = d3.select('body').append('svg') ;
				
				
			}(window)) ;
			
       	</script>
    </body>
</html>
